<template>
	<div class="r-list-wrap">
		<div class="r-list-title">
			房间列表<span @click="closeBox"><img src="@/assets/images/copy.png" alt=""></span>
		</div>
		<div class="r-list-content">
			<div class="r-list-box" v-for="(room,i) in rooms" :key="i">
				<div class="r-list-item">
					<img :src="room.thumburl" alt="">
					<div class="icon-name">{{room.title}}</div>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
export default {
  props: {
    rooms: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  methods: {
    closeBox() {
      this.$emit("handleParent");
    }
  }
};
</script>

<style lang="scss">
.r-list-wrap {
  height: 994px;
  display: flex;
  flex-direction: column;
  background: #fff;
  position: fixed;
  bottom: 0;
  width: 1080px;

  .r-list-title {
    height: 100px;
    line-height: 100px;
    font-size: 40px;
    font-weight: 500;
    color: #333333;
    padding-left: 48px;

    img {
      width: 48px;
      height: 48px;
      vertical-align: middle;
    }

    span {
      float: right;
      margin-right: 80px;
    }
  }
  .r-list-content {
    flex: 1;
    overflow: auto;
    padding: 0 48px;
    .r-list-box {
      display: inline-block;
      vertical-align: top;
      width: 50%;
      height: 392px;
      border-top: 2px solid #e5e2e2;
      box-sizing: border-box;
      .r-list-item {
        position: relative;
        img {
          width: 100%;
          height: 344px;
        }
        .icon-name {
          background: rgba(0, 0, 0, 0.6032);
          text-align: center;
          border-radius: 10px;
          width: 174px;
          height: 58px;
          line-height: 58px;
          position: absolute;
          bottom: 64px;
          left: 50%;
          transform: translateX(-50%);
          font-weight: 500;
          font-size: 32px;
          color: #fff;
        }
      }
    }
    .r-list-box:nth-child(odd) {
      border-right: 2px solid #e5e2e2;
      padding: 24px 25px 24px 0;
    }
    .r-list-box:nth-child(even) {
      margin-left: -2px;
      padding: 24px 0 24px 25px;
    }
  }
}
</style>
